<template>
  <div class="sku" v-show="skuShow" @click="closeModel">
    <transition name="fade">
      <div class="card" @click.stop="" v-if="skuShow">
        <div>
          <div class="goodsInfo">
            <img :src="picurl+goodsItem.pics[0]" alt="" class="skuimg">
            <div class="right">
              <div class="skuTitle">{{goodsItem.name}}</div>
              <div class="skuSeleced">已选：{{skuSeleced}}</div>
              <div class="skuPrice">价格：￥{{selecSku.price_discount}}</div>
            </div>
          </div>
        </div>
        <div class="sku_ls">
          <div v-for="(sku,index) in goodsItem.template.attributes" v-if="goodsItem.template" class="sku_item">
            <div class="name">{{sku.name}}</div>
            <div class="value_ls">
              <div v-for="(val,i) in sku.attribute_values" class="value"
                   :class="[ skuIds[index] === val.id ? 'active' : '']"
                   @click="skuChoose(val,index)">
                {{val.name}}
              </div>
            </div>
          </div>
        </div>
        <div class="activity" @click="addCar">选好了</div>
      </div>
    </transition>
  </div>
</template>

<script type="text/ecmascript6">

  import Vue from 'vue';
  import {_post} from '@/api/mainApi';

  export default {
    name: 'Sku',
    props: {
      goodsItem: {
        type: Object
      },
      skuShow: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        skuImg: '',
        skuTitle: '',
        skuSeleced: '',
        skuIds: [],
        skuPrice: '',
        picurl: this.GLOBAL.picurl,
        active: true,
        goodsSelcId: 0,
        skuName: [],
        selecSku: {}
      };
    },
    watch: {
      goodsItem(val) {
      if(this.goodsSelcId !== val.id){
            this.skuName = [];
          this.skuIds = [],
          val.template.attributes.every((val, index) => {
            this.skuIds.push(val.attribute_values[0].id);
            this.skuName.push(val.attribute_values[0].name);
            val.attribute_values.every((val1, index1) => {
              val1.active = true;
              return true;
            });
            return true;
          });
        }
        this.goodsSelcId = val.id;
        this.skuSeleced = this.skuName.join('/');
        _post('frontend/cart/search_sku', {goods_id: this.goodsSelcId, sku_ids: this.skuIds}).then(res => {
          console.log('skus', res.data);
          let data = res.data;
          this.selecSku = data.data;
        });
        console.log('skus', this.skuIds);
        console.log('selecSku', this.selecSku);
      }
    },
    methods: {
      decreaseCart(event) {// 减少数量
        if (!event._constructed) {// 阻止pc端点击后执行两次
          return;
        }
        if (this.foodItem.count) {
          this.foodItem.count--;
        }
      },
      addCart(event) {// 增加数量
        if (!event._constructed) {// 阻止pc端点击后执行两次
          return;
        }
        if (!this.foodItem.count) {
          Vue.set(this.foodItem, 'count', 1);
        } else {
          this.foodItem.count++;
        }
        _post('frontend/cart/create', {goods_id: this.foodItem.id, count: this.foodItem.count}).then(
          res => {
            let data = res.data.data;
            console.log('dcart', data);
            // console.log(this.$root.eventHub);// 定义的新的公共实例eventHub，归按钮组件和购物车组件公用，传输数据
            this.$root.eventHub.$emit('cart.add', event.target); // 传输点击的目标元素
          }
        );

      },
      closeModel() {
        this.$root.eventHub.$emit('sku.show', event.target);
      },
      skuChoose(item, index) {
        this.$set(this.skuIds, index, item.id);
        this.$set(this.skuName, index, item.name);
        this.skuSeleced = this.skuName.join('/');
        _post('frontend/cart/search_sku', {goods_id: this.goodsSelcId, sku_ids: this.skuIds}).then(res => {
          console.log('skus', res.data);
          let data = res.data;
          this.selecSku = data.data;
        });
        console.log(this.skuIds);
      },
      addCar() {
        if (!this.goodsItem.count) {
          Vue.set(this.goodsItem, 'count', 1);
        } else {
          this.goodsItem.count++;
        }
        _post('frontend/cart/create', {goods_id: this.goodsItem.id, count: 1, sku_ids: this.skuIds}).then(res => {
          let data = res.data;
          console.log('data', data);
          if (data.code === 200) {
            this.closeModel();
            this.$root.eventHub.$emit('cart.add_', event.target);
          }
        });
      }
    }
  };



</script>

<style>
  .sku {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100;
  }

  .goodsInfo {
    display: flex;
    padding: 10px 10px;
  }

  .goodsInfo .right {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin-left: 10px;
    font-size: 15px;

  }

  .skuimg {
    width: 80px;
    height: 80px;
  }

  .card {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    width: 100%;
    min-height: 200px;
    background: #ffffff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .activity {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    /*border-radius: 50px;*/
    background: rgba(206, 181, 110, 0.83);
    color: #fff;
  }

  .sku_item {
    margin-bottom: 10px;
  }

  .name {
    color: #4d555d;
    font-size: 14px;
    margin-left: 20px;
  }

  .value_ls {
    display: flex;
    font-size: 12px;
  }

  .sku_ls {
    display: flex;
    flex-flow: column;
  }

  .value {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
    min-width: 30px;
    height: 30px;
    background: #d9dde1;
    border-radius: 5px;
    margin: 6px 10px;
    font-size: 14px;
  }

  .value.active {
    color: #fff;
    background: rgba(206, 181, 110, 0.83);
  }

  .fade-enter-active, .fade-leave-active {
    transition: bottom .5s;
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
  {
    bottom: -1000px;
  }
</style>

